<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>客户详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
    <script src="../assets/js/echarts.js"></script>
    <script src="../assets/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../assets/js/layui/css/layui.css">
    <script type='text/javascript' src='../assets/js/layui/layui.js'></script>
</head>
<body class="bg-gray">

<section class="" id="amz-main" data-tag="css-nav">
    <div class="tixian-top-me  font-color-white prelative">
        <div class="am-padding-top-lg">
            <div class="am-benj">
                <div class="bg-white font-14 am-padding-left-sm am-padding-top-sm am-padding-bottom-sm  prelative am-listborder">
                    <div class="box" id="userinfo">
                        <template v-cloak>
                        <div class="am-me-w80">
                            <img v-bind:src="userinfo.head_icon" class="am-img-responsive border-circle" v-on:click="show(userinfo.head_icon)">
                        </div>
                        <div class="box-1" >
                            <div class="box-1 am-margin-left-sm am-margin-left-90">
                                <div class="font-color-2 am-margin-top-xs font-18">
                                    {{userinfo.nick_name}}
                                    <a class="am-text-xs am-padding-left-xs am-color-blue" v-on:click="info()">资料</a>

                                </div>
                                <!--<div class="font-color-1 font-14">预计成交率:<span class="">{{userinfo.rate}}%</span></div>-->
                                <div class="font-color-1 font-14"><span class="font-12">{{userinfo.phone}}</span></div>
                            </div>
                        </div>
                        <div class=" am-margin-right-sm   am-padding-top-xs am-for-bg">
                            <div class="box">
                                <div class="icon-news-white"></div>
                            </div>
                            <div onclick="sendmsg()" class=" font-color-white font-14 margin-top-2 border-radius-50 am-padding-left-sm am-padding-right-sm">
                                发信息
                            </div>
                        </div>
                        </template>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div data-am-widget="tabs" class="am-tabs am-tabs-d2" data-am-tabs-noswipe="1">
        <ul class="am-tabs-nav am-cf">
            <li class="am-active " id="radar"><a href="[data-tab-panel-0]">雷达</a></li>
            <li class="" id="cus"><a href="[data-tab-panel-1]">客户分析</a></li>
        </ul>
        <div class="am-tabs-bd">
            <div data-tab-panel-0 class="am-tab-panel am-active">
                <div id="datalist" v-cloak>
                    <div class="am-padding-top-ss" v-for="log in logs">
                        <div class=" am-benj">
                            <div class="bg-white font-14 am-padding-left-sm am-padding-top-sm am-padding-bottom-sm padding-right-2rems prelative am-listborder">
                                <div class="box ">
                                    <div class="width-45px"><img v-bind:src="log.head_icon"
                                                                 class="am-img-responsive border-circle"></div>
                                    <div class="box-1">
                                        <div class="font-16 font-color-2 am-listcent">{{log.nick_name}}<span
                                                class="am-color-blue">{{log.description}}</span></div>
                                    </div>
                                </div>

                               <!-- <i class="icon-arrow-right-3"></i>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div data-tab-panel-1 class="am-tab-panel ">
                <div class="am-g am-padding-top-slg am-padding-left-xs am-padding-right-xs">
                    <!--<div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card">
                            <img src="../assets/images/uploads/01.jpg">
                        </div>
                    </div>-->
                    <div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card" id="pie" style="height: 250px;width: 100%">

                        </div>
                    </div>
                    <div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card" id="bar" style="height: 250px;width: 100%">

                        </div>
                    </div>
                    <div class="am-u-sm-12 data-list-tow">
                        <div class="layui-card" id="line" style="height: 250px;width: 100%">

                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>


</section>


<script src="../assets/js/vue2.2.2.min.js"></script>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/md5.js"></script>
<script src="../assets/common.js"></script>
<script>
    $(".tab-container .tab-items").on("click", function () {
        $(".tab-container .tab-items").removeClass("cur");
        $(this).addClass("cur");
    })

    var userid = getQueryString("userid");
    var sessionid = getQueryString("sessionid");
    var loginid;
    var vues;
    var mask;
    var tabsindex=1;
    var islast=0;
    var recount=0;//刷新次数
    var totalpage;
    var page={
        "page_num": 1,
        "page_size": 10,
        "user_id":''
    }
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    function sendmsg() {
        window.location.href = '聊天.html?sessionid='+sessionid+'&toUserId='+loginid;
    }
    window.onscroll = function () {
        if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
            nextPage();
        }

        if (getScrollTop() == 0) {
            reloadPage();
        }
    };
    function getDta() {
        var uuid=randomString();
        var sign = hex_md5(userid+sessionid+uuid+"-keji").toUpperCase();
        console.log(sign)
        $.ajax({
            url: baseUrl+'v3.0/user/ai/analysis?user_id='+userid,
            type: 'GET',
            contentType: 'application/json',
            headers: {'session_id': sessionid,"uuid":uuid,"sign":sign},
            success: function (result) {
                layer.close(mask);
                pie(result, 'pie');
                bar(result, 'bar');
                line(result, 'line')
            }

        })
    }
    function pie(result, id) {
        var legend = [];
        for (item in result.pie) {
            legend.push(result.pie[item].name)
        }
        var optionpie = {
            legend: {
                orient: 'horizontal',
                y: 'bottom',
                data: legend
            },
            color: ['#37A2DA', '#32C5E9', '#67E0E3'],
            title : {
                text: '客户兴趣占比',
                x:'center'
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',//类型
                    center: ['50%', '50%'],//位置
                    data: result.pie,//数据
                    radius: '65%',//大小
                    label: {
                        normal: {
                            formatter: '{d}%',
                            textStyle: {
                                fontWeight: 'normal',
                                fontSize: 15
                            }
                        }
                    }
                }
            ]
        };
        charts(optionpie, id)

    }
    function bar(result, id) {
        var legend = [];
        var data = [];
        for (item in result.bar) {
            legend.push(result.bar[item].name);
            data.push(result.bar[item].value)
        }
        var optionbar = {
            calculable: true,
            title : {
                text: '客户与我互动',
                x:'center'
            },
            color: [ '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C'],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false //不显示网格
                    }
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    data: legend
                }
            ],
            series: [

                {
                    name: '2012年',
                    type: 'bar',
                    data: data,
                    barCategoryGap: '30%',
                    itemStyle : { normal: {label : {show: true}}}
                }
            ]
        };
        charts(optionbar, id)
    }
    function line(result, id) {
        var legend = [];
        var data = [];
        for (item in result.line) {
            legend.push(result.line[item].name);
            data.push(result.line[item].value)
        }
        var optionline = {
            calculable: true,
            title : {
                text: '近期15日用户活跃度',
                x:'center'
            },
            color: [ '#37A2DA'],
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                top: '20%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: legend
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        show: false //不显示网格
                    }
                }
            ],
            series: [
                {
                    name: '最高气温',
                    type: 'line',
                    data: data,
                    itemStyle : { normal: {label : {show: true}}},
                    symbol:'none',  //这句就是去掉点的
                    smooth:true  //这句就是让曲线变平滑的
                }
            ]
        };
        charts(optionline, id)
    }
    function charts(option, id) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(id));
        // 指定图表的配置项和数据
        option = option;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    function getScrollTop() {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {
        var scrollHeight = 0,
            bodyScrollHeight = 0,
            documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
    $(function () {
        setTimeout(function(){
            mask = layer.msg('正在加载', {icon: 16});
            getDta();
            $.ajax({
                type: 'get',
                url: baseUrl + 'v3.0/user/simple/' + userid,
                contentType: 'application/json',
                headers: {'session_id': sessionid},
                success: function (result) {
                    layer.close(mask);
                    loginid=userid;
                    //注册vue
                    var vue1=new Vue({
                        el: "#userinfo",
                        data: {
                            userinfo: result
                        },
                        methods: {
                            info: function () {
                                window.location.href = "客户详情-查看.html?sessionid="+sessionid+"&userid="+userid;
                            },
                            show:function(url){
                                window.location.href =url
                            }
                        }
                    })
                    page.user_id= userid
                    $.ajax({
                        url: baseUrl + 'v3.0/user/log/page',
                        contentType: 'application/json',
                        type: 'POST',
                        data: JSON.stringify(page),
                        headers: {'session_id': sessionid},
                        success: function (data) {
                            totalpage=data.total_num/data.page_size
                            //注册vue
                            vues= new Vue({
                                el: "#datalist",
                                data: {
                                    logs: data.data_list
                                }
                            })
                        }

                    })

                }
            });
        },200)

    })


    //刷新
    function reloadPage(){
        if (tabsindex==1){
            recount++;
            if(recount==1){
                mask = layer.msg('刷新中', {icon: 16});
                page.page_num=1;
                $.ajax({
                    url: baseUrl + 'v3.0/user/log/page',
                    contentType: 'application/json',
                    type: 'POST',
                    data: JSON.stringify(page),
                    headers: {'session_id': sessionid},
                    success: function (data) {
                        vues.logs=data.data_list
                        layer.close(mask);
                        setTimeout(function () {
                            recount=0;
                            islast=0;
                        },1000)
                    }
                })
            }

        }

    }

    //下一页
    function nextPage(){
        if (tabsindex==1){
            if (totalpage<=1){
                return;
            }
            if(islast==1){
                mask = layer.msg('最后一页了');
                setTimeout(function(){
                    layer.close(mask);
                },2000)
                return;//最后一页了
            }
            mask = layer.msg('加载下一页', {icon: 16});
            page.page_num++;
            $.ajax({
                url: baseUrl + 'v3.0/user/log/page',
                contentType: 'application/json',
                type: 'POST',
                data: JSON.stringify(page),
                headers: {'session_id': sessionid},
                success: function (result) {
                    if(result.total_num<result.page_size*result.page_num)
                    {
                        islast=1;
                    }
                    for(var i in result.data_list)
                    {
                        vues.logs.push(result.data_list[i]);

                    }
                    layer.close(mask);

                }

            })
        }

    }

    $("#radar").click(function(){
        tabsindex=1
    })
    $("#cus").click(function(){
        tabsindex=2
    })
</script>

</body>
</html>